<template>
	<view class="">
		<view class="form-title">结算信息</view>
		<u-form :model="form" ref="uForm_4" label-position="top" :label-style="labelStyle">
			<view class="u-p-x-30">
				<u-form-item label="银行账户名称" prop="card_name">
					<u-input v-model="form.card_name"  placeholder="请填写银行账户名称"/>
				</u-form-item>
				<u-form-item label="银行账户号" prop="bank_account">
					<u-input v-model="form.bank_account"  placeholder="请填写银行账户号"/>
				</u-form-item>
				<u-form-item label="开户行名称" prop="bank_name">
          <view style="width: 100%;" @click="applyBankShow = true">
            <u-input style="pointer-events: none" v-model="form.bank_name" type="select" placeholder="请选择开户行名称"/>
          </view>
				</u-form-item>
				<u-form-item label="银行开户地区" prop="bankRegion">
          <view style="width: 100%;" @click="showbankRegion = true">
					  <u-input style="pointer-events: none" v-model="form.bankRegion" type="select" placeholder="请选择银行所在省市"/>
          </view>
				</u-form-item>
				<u-form-item label="银行支行编码" prop="branch_name">
          <view style="width: 100%;" @click="branchShow = true">
					  <u-input style="pointer-events: none" class="bank" v-model="form.branch_name" type="select"/>
          </view>
				</u-form-item>
				<u-form-item v-if="form.branch_name" class="position-relative" label="银行支行名称" prop="branch_code1">
					<!-- <input @input="handleInput" placeholder="请输入银行支行名称"/> -->
					<u-input type="text" @input="handleInput" v-model="form.branch_code1" placeholder="请输入银行支行名称" />
					<view v-if="showBank" class="list position-absolute flex flex-column" :style="{height: showBankHeight+'rpx',top:showBankTop+'rpx'}">
						<text v-for="(item,index) in branchList1" :key="index" @click="checkBank(item)">{{item.name}}</text>
					</view>
				</u-form-item>
				<u-form-item label="银行卡正面照片" prop="bank_image">
					<u-upload @on-choose-complete="uploadSuccess" index="bank_image" :file-list="logData.bank_image ? [{url:logData.bank_image}] : []" ref="uUpload3" max-count="1" :max-size="2 * 1024 * 1024" width="150" height="150"></u-upload>
				</u-form-item>
			</view>
		</u-form>
		<u-select v-model="applyBankShow" :list="applyBankList" label-name="name" value-name="code" @confirm="applyBankConfirm"></u-select>
		<u-picker v-model="showbankRegion" :range="AreaList" mode="multiSelector" range-key="name" :default-selector="select"
			@confirm="confirmBankRegion" @columnchange="columnchange"></u-picker>
		<u-select v-model="branchShow" :list="branchList" label-name="name" value-name="code" @confirm="branchConfirm"></u-select>
			
		<view class="bg-white">
			<view class="flex align-center justify-evenly u-p-30">
				<dy-button width="250rpx" size="default" color="#FE572A" backgroundColor="#fff" borderColor="#FE572A" @click="back">上一步</dy-button>
				<dy-button width="250rpx" size="default" @click="submit">下一步</dy-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapActions } from 'vuex'
	import { SupplierCenterApi,MineCenterApi } from '@/api/serves.js'
	export default {
		name:'Step4',
		data() {
			return {
				applyBankShow:false,
				showBank:false,
				showBankHeight:'',
				showBankTop:'',
				showbankRegion:false,
				branchShow:false,
				form: {
					card_name:'',
					bank_account:'',
					bank_name:'',
					bank_code:'',
					bankRegion:'',
					bank_prov_id:'',
					bank_area_id:'',
					bank_image:'',
					branch_name:'',
					branch_code:'',
					branch_code1:'',
				},
				rules: {
					card_name: [{required: true,message: '请输入银行账户名称',trigger: ['blur', 'change']}],
					bank_account: [{required: true,message: '请填写银行账户号',trigger: ['blur', 'change']}],
					bank_name: [{required: true,message: '请选择银行账户名称',trigger: ['blur', 'change']}],
				},
				applyBankList: [],
				branchList: [],
				branchList1:[],
				AreaList:[],
				select:[0,0],
				labelStyle:{
					fontSize: '28rpx',
					fontWeight:'bold',
				},
				log:{}
			}
		},
		props: {
			logData: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		async mounted() {
			this.$refs.uForm_4.setRules(this.rules);
			this._getApplyBankList()
			this._getbranchList()
			// 初始化银行省市信息
			let p1 = SupplierCenterApi.getArea({
				level:1,
			})
			let p2 = SupplierCenterApi.getArea({
				level:2,
				p_id:1
			})
			let areaList = await Promise.all([p1,p2])
			this.AreaList = [areaList[0].data,areaList[1].data]
			this._applyIndex()
		},
		methods: {
			...mapActions({ upload:'user/upload' }),
			submit(){
				this.$refs.uForm_4.validate(valid => {
					if (valid) {
						uni.setStorageSync('applyForm_4', this.form)
						this.$emit('submit', this.form);
					}
				});
			},
			_applyIndex() {
				if(JSON.stringify(this.logData) === '{}'){
					let applyForm = uni.getStorageSync('applyForm_4')
					if(applyForm){
						Object.keys(this.form).forEach(key => {
							if (applyForm.hasOwnProperty(key)) {
								this.form[key] = applyForm[key];
							}
						})
						this.log = applyForm
					}
				}else{
					Object.keys(this.form).forEach(key => {
						if (this.logData.hasOwnProperty(key)) {
							this.form[key] = this.logData[key];
						}
					})
					this.log == this.logData
					this.form.bankRegion = this.log.bankRegion || this.logData.bankregion || ''
				}
			},
			_getApplyBankList(){
				SupplierCenterApi.getApplyBankList().then(res => {
					if(res.code == 1){
						this.applyBankList  = res.data
					}
				})
			},
			async _getbranchList(){
				let list = await MineCenterApi.getbranchList({level:1,page:1})
				this.branchList = list.data
			},
			confirmBankRegion(e) {
				let {AreaList} = this
				this.form.bankRegion = `${AreaList[0][e[0]].name},${AreaList[1][e[1]].name}`
				this.form.bank_prov_id = AreaList[0][e[0]].id
				this.form.bank_area_id = AreaList[1][e[1]].id
			},
			async columnchange(e){
				let {column,index} =e
				this.select[column] = e.index
				if(column==0){
					let res = await SupplierCenterApi.getArea({
						level:2,
						p_id: this.AreaList[column][index].id
					})
					this.$set(this.AreaList,[1],res.data)
				}
			},
			applyBankConfirm(data) {
				this.form.bank_name = data[0].label
				this.form.bank_code = data[0].value
			},
			back(){
				this.$emit('back');
			},
			uploadSuccess(files, name){
				this.upload(files).then(res=> {
					if(res.length>0) {
						this.form[name] = this.$_BASE_IMG_API + res[0]
					}
				})
			},
			async handleInput(e){
				this.showBank = e ? true : false
				if(e){
					let index = this.branchList.findIndex(item=>item.code == this.form.branch_code)
					let list = await MineCenterApi.getbranchList({level:2,p_id:this.branchList[index].id,keyword:e})
					this.branchList1 = list.data
					switch (list.data.length){
						case 1:
							this.showBankHeight = 74
							this.showBankTop = -74
							break;
						case 2:
							this.showBankHeight = 2*74
							this.showBankTop = -74 * 2
							break;
						case 3:
							this.showBankHeight = 3*74
							this.showBankTop = -74 * 3
							break;
						default:
							this.showBankHeight = 264
							this.showBankTop = -266
							break;
					}
					console.log(list);
				}
			},
			branchConfirm(data) {
				this.form.branch_name = data[0].label
				this.form.branch_code = data[0].value
			},
			// 选择银行支行
			checkBank(item){
				console.log(item);
				this.showBank = false
				this.form.branch_code = item.code
				this.form.branch_code1 = item.name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-title{
		font-size: 36rpx;
		font-weight: bold;
		margin: 10rpx 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 6rpx solid #c7c7c7;
	}
	.list{
		width: 100%;
		height: 264rpx;
		overflow-y: scroll;
		background-color: #fefefe;
		// background-color: #ffaa7f;
		border: 1px solid #eee;
		left: 0;
		top: -266rpx;
		z-index: 9;
		text{
			text-align: center;
			border-bottom: 1px solid #eee;
		}
	}
</style>